<template>
  <div class="middle">
    <div class="middle-header">
      意图热词：<span>{{ hotWorNumber | num }}</span>
    </div>
    <div class="middle-middle">
      <div class="infobg">
        <div class="infoBox">
          <el-carousel style="color: rgb(69, 208, 252); font-size: 0.75rem">
            <el-carousel-item
              v-for="(item, index) in dataLists"
              :key="index"
              indicator-position="none"
              interval="3000"
            >
              <div class="items">
                <p>意图：{{ item.business }}</p>
                <p>性别：{{ item.gnder }}</p>
                <p>年龄分段：{{ item.age }}</p>
                <p>家庭信息：{{ item.info }}</p>
              </div>
            </el-carousel-item>
          </el-carousel>
        </div>
      </div>
    </div>
    <div class="pops">
      <div class="pop" v-for="(item, index) in word" :key="index">
        {{ item }}
      </div>
    </div>
    <div class="middle-bottom">
      <el-table
        :data="dataLists"
        style="width: 100%"
        max-height="240"
        ref="table"
        :header-cell-style="{
          background: 'rgba(31,126,255,.3)',
          color: 'rgb(69, 208, 252)',
        }"
      >
        <el-table-column
          prop="index"
          label="序号"
          width="width"
          align="center"
          header-align="center"
        >
        </el-table-column>
        <el-table-column
          prop="prop"
          label="话务语音"
          width="50"
          align="center"
          header-align="center"
        >
          <template>
            <div class="video">
              <img src="@/assets/u178.png" alt="" style="cursor: pointer" />
            </div>
          </template>
        </el-table-column>
        <el-table-column
          prop="example"
          label="语音实例"
          width="200"
          align="center"
          header-align="center"
        >
          <template slot-scope="scope">
            <el-tooltip :content="scope.row.example" placement="top-start">
              <el-button type="text">{{ scope.row.example }}</el-button>
            </el-tooltip>
          </template>
        </el-table-column>
        <el-table-column
          prop="business"
          label="客户意图"
          width="width"
          align="center"
          header-align="center"
        ></el-table-column>
        <el-table-column
          prop="gnder"
          label="客户性别"
          width="50"
          align="center"
          header-align="center"
        ></el-table-column>
        <el-table-column
          prop="age"
          label="客户年龄分布"
          width="width"
          align="center"
          header-align="center"
        ></el-table-column>
        <el-table-column
          prop="info"
          label="客户家庭信息"
          width="width"
          align="center"
          header-align="center"
        ></el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
import dataList from "./data.json";
export default {
  name: "middle",
  data() {
    return {
      hotWorNumber: "106",
      word: [
        "套餐低签",
        "天翼看家",
        "携号转出",
        "移机搬家",
        "智能门禁",
        "智能门锁",
      ],
      dataLists: [],
    };
  },
  methods: {
    infinitScroll(ref) {
      // 拿到表格挂载后的真实DOM
      const table = this.$refs[ref];
      // 拿到表格中承载数据的div元素
      const divData = table.bodyWrapper;
      divData.onmouseover = function () {
        clearInterval(t);
      }; //鼠标移入，停止滚动
      divData.onmouseout = function () {
        start();
      }; //鼠标移出，继续滚动

      // 拿到元素后，对元素进行定时增加距离顶部距离，实现滚动效果(此配置为每100毫秒移动1像素)
      let t;
      function start() {
        // console.log(2);
        // 数据少于表格高度停止滚动
        // if (divData.clientHeight >= divData.scrollHeight) {
        //   return;
        // }
        t = setInterval(() => {
          // 元素自增距离顶部1像素
          divData.scrollTop += 1;
          //   console.log(1);
          // 判断元素是否滚动到底部(可视高度+距离顶部=整个高度)
          if (
            divData.clientHeight + divData.scrollTop ==
            divData.scrollHeight
          ) {
            // 重置table距离顶部距离
            divData.scrollTop = 0;
          }
        }, 100);
      }
      start();
    },
  },
  created() {
    this.dataLists = dataList.slice(0, 20);
  },
  mounted() {
    this.infinitScroll("table");
  },
  filters: {
    num: (val) => {
      val = "" + val; // 转换成字符串
      let int = val;
      int = int.split("").reverse().join(""); // 翻转整数
      let temp = ""; // 临时变量
      for (let i = 0; i < int.length; i++) {
        temp += int[i];
        if ((i + 1) % 3 === 0 && i !== int.length - 1) {
          temp += ","; // 每隔三个数字拼接一个逗号
        }
      }
      temp = temp.split("").reverse().join(""); // 加完逗号之后翻转
      return temp; // 返回
    },
  },
};
</script>

<style scoped lang="scss">
// 动画
@keyframes mymove {
  0% {
    opacity: 1;
    bottom: -2rem;
    transform: scale(0.2);
  }
  100% {
    opacity: 0.9;
    bottom: 22rem;
    transform: scale(1.2);
  }
}
//
.middle {
  position: relative;
  height: 100%;
  .middle-header {
    padding: 1rem;
    font-family: electronicFont;
    font-size: 1.25rem;
    color: #fff;
    span {
      font-size: 1.8rem;
      letter-spacing: 0.3rem;
      color: rgb(69, 208, 252);
    }
  }
  .middle-middle {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    margin-right: 0.3125rem;
    height: 50%;
    background-image: url("@/assets/u3.png");
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center center;
    .infobg {
      padding: 0.5rem;
      background-image: url("@/assets/u186.png");
      background-repeat: no-repeat;
      background-size: 104% 144%;
      background-position: -2px -2.1875rem;
      .infoBox {
        width: 13rem;
        height: 8.043rem;
        border: 1px solid rgb(69, 208, 252);
        border-radius: 3px;
        .items {
          padding-left: 2.3rem;
          padding-top: 1rem;
          line-height: 1.2rem;
        }
      }
    }
  }
  .middle-bottom {
    height: 30%;
    // overflow: auto;
  }
}
::v-deep .el-carousel__indicators {
  display: none;
}
::v-deep .el-carousel__arrow {
  top: 30%;
}
// 左边的气泡
.pops {
  position: absolute;
  top: 10%;
  left: 0;
  height: 45%;
  width: 50%;
  //   background-color: #fff;
  color: #fff;
  overflow: hidden;
  font-size: 1.5rem;
  .pop {
    opacity: 0;
    width: 7rem;
    height: 7rem;
    line-height: 7rem;
    background: url("@/assets/u128.png") no-repeat;
    background-size: cover;
    text-align: center;
    cursor: pointer;
  }
  .pop:hover {
    animation-play-state: paused;
  }
  .pop:active{
    animation-play-state: paused;
  }
  .pop:nth-child(1) {
    position: absolute;
    left: 10%;
    animation: mymove 7s cubic-bezier(1, 0.55, 0.85, 1.29) 0s infinite;
  }
  .pop:nth-child(2) {
    position: absolute;
    left: 60%;
    animation: mymove 10s cubic-bezier(0.075, 0.42, 0.85, 1.3) 1s infinite;
  }
  .pop:nth-child(3) {
    position: absolute;
    left: 30%;
    animation: mymove 8s ease 2s infinite;
  }
  .pop:nth-child(4) {
    position: absolute;
    left: 35%;
    animation: mymove 10s linear 3s infinite;
  }
  .pop:nth-child(5) {
    position: absolute;
    left: 15%;
    animation: mymove 10s cubic-bezier(1, 0.42, 0.85, 1.3) 4s infinite;
  }
  .pop:nth-child(6) {
    position: absolute;
    left: 66%;
    animation: mymove 11s ease-in-out 5s infinite;
  }
  .pop:nth-child(7) {
    position: absolute;
    left: 58%;
    animation: mymove 10s linear 6s infinite;
  }
  .pop:nth-child(8) {
    position: absolute;
    left: 73%;
    animation: mymove 10s cubic-bezier(0.075, 0.22, 0.65, 1) -6s infinite;
  }
}
// 表格
::v-deep.el-table,
.el-table__expanded-cell {
  background: rgba(0, 133, 255, 0);
  color: #fff;
  font-size: 0.875rem;
}
::v-deep .el-table_5_column_5 {
  background: transparent;
}
::v-deep .el-table__row {
  background: transparent;
}
.el-table {
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* IE 10+ */
  ::-webkit-scrollbar {
    display: none; /* Chrome Safari */
  }
  border-bottom: none !important;
  ::v-deep tbody tr:hover > td {
    background-color: rgba(16, 48, 78, 0) !important;
  }
  ::v-deep thead tr,
  ::v-deep thead .el-table__cell {
    background-color: transparent;
    color: #fff;
  }
  ::v-deep .el-button--text {
    color: rgb(8, 216, 249);
  }
}
::v-deep.el-table tr {
  background: transparent;
}
::v-deep .el-table_2_column_4 {
  background: transparent;
}
.el-table th.el-table__cell {
  background-color: transparent;
}
::v-deep .btn-prev,
::v-deep .btn-next {
  background: transparent !important;
}
::v-deep .el-table td.el-table__cell,
::v-deep .el-table th.el-table__cell.is-leaf {
  border-bottom: none !important;
}
::v-deep .has-gutter .el-table td.el-table__cell,
::v-deep .has-gutter .el-table th.el-table__cell.is-leaf {
  border-bottom: none !important;
}
::v-deep .el-table__column-resize-proxy {
  border-left: none;
}
::v-deep .el-table::before {
  background-color: transparent;
}
::v-deep .el-table .el-table__cell {
  padding: 0.5rem 0;
}
// 修改rem布局

::v-deep el-table {
}
::v-deep .el-table .cell {
  box-sizing: border-box;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: normal;
  word-break: break-all;
  line-height: 1.4375rem;
  padding-left: 0.625rem;
  padding-right: 0.625rem;
}
</style>